<!-- xiaomu封装的组件：签约管理、服务管理、居民管理的 搜索表单 -->
<template>
  <div class="mu-search-form">
    <el-form :model="formData" inline>
      <el-form-item :label="`${title}状态`">
        <el-select v-model="formData.state" size="default" clearable placeholder="请选择">
          <el-option :label="item.label" :value="item.value" v-for="item in stateData" :key="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="签约机构">
        <el-select v-model="formData.organizationId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in organizationsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="医生团队">
        <el-select v-model="formData.teamId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in doctorTeamsData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item label="服务包">
        <el-select v-model="formData.servicePackId" size="default" clearable placeholder="请选择">
          <el-option :label="item.name" :value="item._id" v-for="item in servicePacksData.rows" :key="item._id" />
        </el-select>
      </el-form-item>
      <el-form-item v-if="isHaveName" label="用户名">
        <el-input v-model="formData.name" clearable placeholder="请输入" />
      </el-form-item>

      <el-form-item v-if="isHaveAddBtn" style="width: auto;">
        <el-button type="primary" @click="$router.push('/service/add')">
          新增服务
        </el-button>
      </el-form-item>
      <el-form-item style="width: auto;">
        <el-button type="primary" @click="$emit('searchSigns')">搜索</el-button>
      </el-form-item>
      <el-form-item style="width: auto;">
        <el-button @click="formData = {}">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { useFindData } from '@/composables/findData';
import { onMounted } from 'vue';

const { findOrganization, organizationsData, searchDoctorTeams, doctorTeamsData, findServicePacks, servicePacksData } = useFindData();

const formData: any = defineModel("formData");

defineEmits(['searchSigns']);

const {
  stateData = [
    { label: '已驳回', value: '0', color: '#FA7674' },
    { label: '待审核', value: '1', color: '#3DD4A7' },
    { label: '待支付', value: '2', color: '#FBE178' }
  ],
  title = '签约',
  isHaveAddBtn = false,
  isHaveName = true,
  // isHaveAddResidentBtn = false
} = defineProps(['stateData', 'title', 'isHaveAddBtn', 'isHaveName']);



onMounted(() => {
  findOrganization();
  searchDoctorTeams();
  findServicePacks();
})
</script>

<style scoped lang="scss">
.mu-search-form {

  .el-form {
    margin-bottom: 40px;

    .el-form-item {
      width: 250px;
      margin-bottom: 0;
    }
  }
}
</style>